<template>
  <!-- 计算成果信息 -->
  <div class="result-box">
    <el-tabs type="border-card" v-model="state.activeName">
      <el-tab-pane label="水位流量过程线" name="first">
        <div class="my-echarts">
          <SwDispatchChart height="100%" :x-labels="state.sysTimes" :servers="state.servers" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="计算成果数据" name="second">
        <el-table :data="state.servers[0]?.ccResult" border v-if="state.isDispatch">
          <el-table-column prop="tm" label="时间" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="fp" label="降雨量" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="入库流量（实测/预报）"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ `${row.rq || '--'}/${row.fq || '--'}` }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="出库流量（实测/预报）"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ `${row.rotq || '--'}/${row.otq || '--'}` }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="水库水位（实测/预报）"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ `${row.rzr || '--'}/${row.zr || '--'}` }}
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="state.servers[0]?.ccResult" border v-else>
          <el-table-column prop="tm" label="时间" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="fp" label="降雨量" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="河道流量（实测/预报）"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ `${row.rq || '--'}/${row.fq || '--'}` }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="河道水位（实测/预报）"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ `${row.rz || '--'}/${row.fz || '--'}` }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="计算成果特征值信息" name="third">
        <mulTable :servers="state.servers" v-show="state.isDispatch" />
        <div class="scheme-box" v-show="!state.isDispatch">
          <el-table
            highlight-current-row
            border
            :header-cell-style="{ border: 'solid 0.5px #d2d3da' }"
            stripe
            fit
            ref="table"
            align="left"
            :data="state.tableData"
            v-loading="dataListLoading"
            :cell-class-name="cellClassName"
            @selection-change="selectionChange"
          >
            <el-table-column prop="leftTitle" label="模型" show-overflow-tooltip align="center">
              <template #default="{ row }">{{ row[0] }}</template>
            </el-table-column>
            <el-table-column prop="scName" label="洪峰流量" show-overflow-tooltip align="center">
              <el-table-column
                v-for="(item, index) in state.schemeArr"
                :label="item.scName"
                :key="index"
                :min-width="item.width"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template #default="scope">{{ switchData(scope.$index, item) }}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="scName" label="洪量" show-overflow-tooltip align="center">
              <el-table-column
                v-for="(item, index) in state.schemeArr"
                :label="item.scName"
                :key="index"
                :min-width="item.width"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template #default="scope">{{ switchLiangData(scope.$index, item) }}</template>
              </el-table-column>
            </el-table-column>

            <el-table-column prop="scName" label="洪现时间" show-overflow-tooltip align="center">
              <el-table-column
                v-for="(item, index) in state.schemeArr"
                :label="item.scName"
                :key="index"
                :min-width="item.width"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template #default="scope">{{ switchTimeData(scope.$index, item) }}</template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { reactive, onMounted, watch } from 'vue'
//特征值
import mulTable from './mulTable.vue'
//水文
import SwDispatchChart from '@/components/app-echart/sw-dispatch-chart.vue'

const state = reactive({
  isDispatch: false,
  activeName: 'first',
  // 过程线数据
  servers: [],
  sysTimes: [],
  // 计算成果数据
  tableData: ['', '', '', '', ''],
  // 特征值所需参数
  schemeArr: [],
  originTitle: ['模拟', '实测', '误差', '许可误差'],
  transTitle: ['', '洪峰', '洪量', '水位', '洪峰时间'],
  eigResultArr: []
  // 特征值信息
})
//洪峰数据转换
function switchLiangData(index, item) {
  switch (index) {
    case 0:
      return item.hongfeng.fcMxq
    case 1:
      return item.hongfeng.rlMxq
    case 2:
      return item.hongfeng.erMxq
    case 3:
      // return item.hongfeng.alerMxt
      return '--'
    default:
      ''
      break
  }
}
//洪量数据转换
function switchData(index, item) {
  switch (index) {
    case 0:
      return item.hongliang.fcV
    case 1:
      return item.hongliang.rlV
    case 2:
      return item.hongliang.erV
    case 3:
      // return item.hongliang.alerMxt
      return '--'
    default:
      ''
      break
  }
}
//时间数据转换
function switchTimeData(index, item) {
  switch (index) {
    case 0:
      return item.time.fcMxt
    case 1:
      return item.time.rlMxt
    case 2:
      return item.time.erMxt
    case 3:
      return item.time.alerMxt
    default:
      ''
      break
  }
}
defineExpose({ handleOpenModal })
function handleOpenModal(item) {
  if (item) {
    state.isDispatch = item.dispatch
    state.activeName = 'first'
    state.servers = item.servers
    state.eigResultArr = item?.eigResultArr
    let arr = []
    state.eigResultArr.forEach((item) => {
      arr.push({ ...item.eigResult[0], scName: item.scInfo.sc_name })
    })
    state.schemeArr = arr
    state.schemeArr = state.schemeArr.map((item) => {
      return {
        ...item,
        hongfeng: {
          fcMxq: item.fcMxq,
          rlMxq: item.rlMxq,
          erMxq: item.erMxq,
          alerMxt: item.alerMxt
        },
        hongliang: { fcV: item.fcV, rlV: item.rlV, erV: item.erV, alerMxt: item.alerMxt },
        time: { fcMxt: item.fcMxt, rlMxt: item.rlMxt, erMxt: item.erMxt, alerMxt: item.alerMxt },
        num: { cerCoe: item.cerCoe, cerCoe: item.cerCoe, cerCoe: item.cerCoe, cerCoe: item.cerCoe }
      }
    })
    console.log(state.schemeArr, 'arr')
    let matrixData = state.schemeArr.map((row) => {
      let arr = []
      for (let key in row) {
        arr.push(row[key])
      }
      return arr
    })
    console.log('22', matrixData)
    // 加入标题拼接最终的数据
    state.tableData = matrixData[0].map((col, i) => {
      return [state.originTitle[i], ...matrixData]
    })
    state.tableData = state.tableData.slice(0, 4)
  }
}
</script>
<style lang="less" scoped>
.result-box {
  width: 100%;
  height: 100%;
  .my-echarts {
    height: 100%;
  }

  :deep(.el-table) {
    height: 100%;
    border: none;
    .el-table__row {
      border: 1px solid red;
    }
    th {
      background-color: #f5f4f4;
      height: 44px;
    }

    td.el-table__cell {
      height: 58px;
    }

    .el-table__body tr:hover > td {
      background: #fff !important;
    }

    .el-table__body tr:hover > td:nth-child(1) {
      background: #f5f4f4 !important;
    }

    td.el-table__cell,
    th.el-table__cell.is-leaf {
      // border-right: 1px solid #ebeef5 !important;
      // border-bottom: 1px solid #ebeef5 !important;
    }

    td.el-table__cell:nth-child(1) {
      background: #f5f4f4;

      .cell {
        text-align: center;
      }
    }

    td.el-table__cell:last-child,
    th.el-table__cell.is-leaf:last-child {
      border-right: none !important;
    }
    .el-scrollbar__view {
      height: 100%;
    }
  }
}
</style>
